<template>
  <el-dialog v-model="dialogVisible" width="500" draggable overflow>
    <template #header>
      <div class="dialog-header">
        <div class="dialog-title">用户登录注册</div>
      </div>
    </template>
    <el-form
        ref="form"
        :model="registerForm"
        label-width="120px"
        style="max-width: 600px"
        v-if="isRegister"
    >
      <el-form-item label="用户名">
        <el-input :prefix-icon="User" v-model="registerForm.userName" clearable placeholder="请输入用户名"/>
      </el-form-item>
      <el-form-item label="联系电话">
        <el-input :prefix-icon="Iphone" v-model="registerForm.phone" clearable placeholder="请输入电话号码"/>
      </el-form-item>

      <el-form-item label="密码">
        <el-input :prefix-icon="Lock" v-model="registerForm.pwd" clearable type="password" placeholder="请输入密码"/>
      </el-form-item>

      <el-form-item label="详细地址">
        <el-input :prefix-icon="Edit" v-model="registerForm.address" clearable type="textarea"
                  placeholder="请输入详细地址"/>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="userRegister">注册</el-button>
      </el-form-item>

      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = false">
          ← 返回登录
        </el-link>
      </el-form-item>
    </el-form>
    <el-form v-else ref="form" :model="loginForm" label-width="120px" style="max-width: 600px">
      <el-form-item label="登录电话">
        <el-input :prefix-icon="Iphone" v-model="loginForm.phone" clearable placeholder="请输入注册电话号码"/>
      </el-form-item>
      <el-form-item label="密码">
        <el-input :prefix-icon="Lock" v-model="loginForm.pwd" clearable type="password" placeholder="请输入密码"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onLogin">登录</el-button>
      </el-form-item>
      <el-form-item class="flex">
        <el-link type="info" :underline="false" @click="isRegister = true">
          注册 →
        </el-link>
      </el-form-item>
    </el-form>
  </el-dialog>
</template>

<script lang="ts" setup>
import {defineProps, defineEmits, watch, reactive, computed, ref} from 'vue';
import {deleteFile} from '@/api/utils';
import {updateProduct} from '@/api/product'
import {userHeadImgStore, useTokenStore, isLoginStore, supplierTokenStore} from '@/store/tokenStore';
import upload from "@/components/upload.vue";
import {ElMessage} from "element-plus";
import {User, Iphone, Lock, Edit} from '@element-plus/icons-vue';
import {register} from '@/api/user'
import {userLogin} from '@/api/login'

const isRegister = ref(false)
// 定义props
const props = defineProps({
  dialogVisible: Boolean
});

// 定义emits
const emit = defineEmits(['update:dialogVisible', 'formSubmitted']);

// 初始化表单数据
const registerForm = ref({
  userName: "",
  phone: "",
  pwd: "",
  address: ""
});
const loginForm = ref({
  phone: "",
  pwd: ""
});
const onLogin = async () => {
  var response = await userLogin(loginForm.value);
  const userToken = useTokenStore()
  userToken.setToken(response)
  //用户身份登录去除供应商身份
  supplierTokenStore().clearSupplierToken()
  emit('update:dialogVisible', false);
  emit('formSubmitted')
}
// 计算属性来同步 dialogVisible 和父组件的状态
const dialogVisible = computed({
  get: () => props.dialogVisible,
  set: (value) => emit('update:dialogVisible', value)
});
const userRegister = async () => {
  var response = await register(registerForm.value);
  isRegister.value = false;
  console.log(response)
}
</script>

<style scoped>
.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dialog-title {
  font-size: 18px;
  font-weight: bold;
}

.pic {
  width: 100px;
  height: 100px;
}
</style>